// 折线图

import React from 'react';
import {parsePercent, numberHandle, safeMultiple} from '~/utils/number';
import CommonEchart from '~/page/FineBi/common/CommonEchart';
import withPannel from '../withPannel';
import {formatTooltip} from '../../utils';

const tooltipCallback = params => formatTooltip(params);

const labelFormatter = params => {
    const {name, percent} = params;
    return `${name}: ${percent}%`;
};

const extendOptions = {
    tooltip: {
        trigger: 'axis',
        formatter: tooltipCallback
    },
    legend: {
        left: 'left',
    },
    yAxis: {
        common: {
            splitLine: {show: false},
            axisLabel: {formatter: value => `${safeMultiple(value, 100)}%`}
        }
    },
    series: {
        common: {
            radius: '50%',
            center: ['60%', '50%'],
            // label: {formatter: labelFormatter},
        }
    }
};

const EchartConfig = props => {
    const {dataSource, unitId, children} = props;

    return (
        <>
            {children}
            <CommonEchart
                {...props}
                id={unitId}
                extendEchartsOptions={extendOptions}
                dataSource={dataSource}
            />
        </>
    );
};

export default withPannel(EchartConfig);
